<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>车辆质量投诉管理系统</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        table th {
            background-color: lightgray;
            font-weight: bold;
        }

        table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        a {
            text-decoration: none;
        }

        form {
            margin-top: 10px;
        }

        label {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
<h1>车辆质量投诉列表</h1>
<table id="complaintTable">
    <thead>
    <tr>
        <th>投诉编号</th>
        <th>投诉品牌</th>
        <th>投诉问题</th>
        <th>投诉车系</th>
        <th>投诉时间</th>
        <th>投诉状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="complaint : ${complaints}">
        <td th:text="${complaint.id}"></td>
        <td th:text="${#lists.find(${brands}, 'brandId', ${complaint.brandId}).brandName}"></td>
        <td th:text="${complaint.problem}"></td>
        <td th:text="${complaint.carType}"></td>
        <td th:text="${complaint.complaintsTime}"></td>
        <td th:text="${complaint.status == 0? '信息审核' : '厂家受理'}"></td>
        <td><a href="javascript:void(0)" th:onclick="|editComplaint(${complaint.id})|">编辑</a></td>
    </tr>
    </tbody>
</table>

<h2>添加投诉</h2>
<form id="addComplaintForm" action="/complaints" method="post">
    <label for="id">投诉编号</label>
    <input type="text" id="id" name="id" required><br>
    <label for="brandId">投诉品牌ID</label>
    <input type="text" id="brandId" name="brandId" required><br>
    <label for="problem">投诉问题</label>
    <input type="text" id="problem" name="problem" required><br>
    <label for="carType">投诉车系</label>
    <input type="text" id="carType" name="carType" required><br>
    <label for="complaintsTime">投诉时间</label>
    <input type="text" id="complaintsTime" name="complaintsTime" required><br>
    <label for="status">投诉状态</label>
    <input type="text" id="status" name="status" required><br>
    <input type="submit" value="提交">
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function editComplaint(id) {
        var status = prompt("请输入新的投诉状态(0:信息审核, 1:厂家受理)");
        if (status === "0" || status === "1") {
            $.ajax({
                url: "/status",
                type: "PUT",
                contentType: "application/json",
                data: JSON.stringify({ id: id, status: parseInt(status) }),
                success: function (data) {
                    alert(data);
                    location.reload();
                }
            });
        } else {
            alert("无效的状态值");
        }
    }

    $(document).ready(function () {
        $('#addComplaintForm').submit(function (e) {
            e.preventDefault();
            var id = $('#id').val();
            var brandId = $('#brandId').val();
            var problem = $('#problem').val();
            var carType = $('#carType').val();
            var complaintsTime = $('#complaintsTime').val();
            var status = $('#status').val();
            if (id && brandId && problem && carType && complaintsTime && status) {
                $(this).unbind('submit').submit();
            } else {
                alert("请填写完整的表单数据");
            }
        });
    });
</script>
</body>
</html>